import React, { Component } from 'react';
import './userCenter.css';
import {Link,Switch,Route} from 'react-router-dom';
import AdminHeader from '../../components/header/adminHeader';
import { Layout, Menu,Upload, message,Avatar } from 'antd';
import { LoadingOutlined, PlusOutlined,UserOutlined  } from '@ant-design/icons';
import userCenterMenu from '../../config/userCenterMenu';

import UserInfo from './userCenterPages/user-info';
import EditPassword from './userCenterPages/edit-password';
import BindingMobile from './userCenterPages/binding-mobile';
import BindingEmail from './userCenterPages/binding-email';
import HelpMore from './userCenterPages/help-more';
import FeedBack from './userCenterPages/feedback';
import CloseAccount from './userCenterPages/close-account';

const { Content, Sider } = Layout;



class UserCenter extends Component {
  state = {
    loading: false,
  };
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  
  beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  
  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
    <div className="user-center-wrapper">
      <AdminHeader />
      <Layout className="user-layout">
        <Sider
          className="user-layout-sider"
        >
          <Menu theme="white" mode="inline" defaultSelectedKeys={['/usercenter/userInfo']}>
            {userCenterMenu.map(item => {
              return (
                <Menu.Item key={item.key}>
                    <Link to={item.key}>{item.title}</Link>
                </Menu.Item>)
            })}
          </Menu>
        </Sider>
        <Layout>
          <Content className="user-layout-content" style={{ margin: '24px 16px 0' }}>
            <div className="content-left" style={{ padding: 35, minHeight: 360 }}>
              
              <Switch>
                <Route exact path='/usercenter/userInfo' component={UserInfo}></Route>
                <Route exact path='/usercenter/editPassword' component={EditPassword}></Route> 
                <Route exact path='/usercenter/bindMobile' component={BindingMobile}></Route>
                <Route exact path='/usercenter/bindEmail' component={BindingEmail}></Route>
                <Route exact path='/usercenter/helpMore' component={HelpMore}></Route>
                <Route exact path='/usercenter/feedBack' component={FeedBack}></Route>
                <Route exact path='/usercenter/closeAccount' component={CloseAccount}></Route>
              </Switch>
            </div>
            <div className="user-info-right" style={{ padding: 24, minHeight: 360 }}>
              <Upload    // 上传头像
                name="userImg"    // 发送到后台的文件参数名
                listType="picture-card"  
                className="img-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                beforeUpload={this.beforeUpload}
                onChange={this.handleChange}
              >
                {imageUrl
                  ? 
                    <img src={imageUrl} alt="avatar" style={{ width: '100%' }} >
                    <div className="edit-img">111111</div>
                    </img> 
                  : 
                    uploadButton
                }
              </Upload>
              <h1>Hi , Admin</h1>
              <p> 薛** &nbsp;&nbsp; 187******62</p>
              <div className="line"></div>
              <div className="help-center">
                <h2>帮助中心</h2> 
                <Link className="more" to="/usercenter/helpMore">更多</Link>
              </div>
              <div className="help-content">
                <div className="help-item">如何注销账号？</div>  
                <div className="help-item">申诉未通过怎么办？</div>
                <div className="help-item">如何申诉？</div>
              </div>
              <div className="line"></div>
              <div className="help-center">
                <h2>意见反馈</h2>
                <Link className="more" to="/usercenter/feedBack">反馈</Link>
              </div>  
            </div>
          </Content>
        </Layout>
      </Layout>
    </div>
    )
  }
}

export default UserCenter;